<template>
  <div class="acountlist-content">
    <div class="acountlist">
      <p>账号列表</p>
      <el-table
        ref="mytable"
        :data="tabledata"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection"></el-table-column>
        <el-table-column label="账号" prop="account"></el-table-column>
        <el-table-column label="用户组" prop="userGroup"></el-table-column>
        <el-table-column label="创建时间" prop="ctime"></el-table-column>
        <el-table-column label="操作">
          <!-- slot-scope有两个属性，一个.row:表示得到当前行的动态数据，$index:当前行的索引位置 -->
          <template slot-scope="item">
            <el-button @click="edit(item.row)">编辑</el-button>
            <el-button type="danger" @click="removeclick(item.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- @size-change:每页条数发送变化时，
      @current-change:点击页数变化时
      :current-page:当前默认显示的页数
      :page-sizes:可以切换每页显示多少条的数组
      :page-size:当前默认显示的条数
      total:数据库的总条数
      layout:控制分页在每个页面的显示顺序，可以删除，可以换位置
       -->
      <el-pagination
        @size-change="sizechange"
        @current-change="pagechange"
        :current-page="curpage"
        :page-sizes="curpagesizes"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <el-button type="danger" @click="removeAll">批量删除</el-button>
      <el-button @click="cancelclick">取消选择</el-button>
    </div>
     <el-dialog title="修改用户信息" :visible.sync="dialogFormVisible">
          <el-input v-model="name" autocomplete="off"></el-input>
          <el-select v-model="value" style="margin-top:30px;">
            <el-option label="普通管理员" ></el-option>
            <el-option label="超级管理员"></el-option>
          </el-select>
      <div slot="footer" class="dialog-footer">
        <el-button @click="reclick">取 消</el-button>
        <el-button type="primary" @click="editclick"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { userList, removeacc, removeall,editacc} from "@/apis/users";
export default {
  data() {
    return {
      value:'',
      name:'',
      dialogFormVisible:false,
      total: 0, //总条数
      curpage: 1, //当前页数
      curpagesizes: [5, 15, 25, 40], //一页显示多少条
      pagesize: 5, //当前选中条数
      // Selectval:[],
      ids: [],
      tabledata: [
        //列表数据
      ],
    };
  },
  methods: {
    // 编辑
    edit(row){//这里的参数获取到当前这条的数据
      this.dialogFormVisible=true
      this.name=row.account,
      this.value=row.userGroup,
      this.accid=row.id
    },
    // 取消编辑
    reclick(){
      this.dialogFormVisible=false
    },
    // 确定编辑
    editclick(){
      this.dialogFormVisible=false,
      editacc({id:this.accid,account:this.name,userGroup:this.value}).then(res=>{
        if(res.data.code==0){
          this.$message({
          message: res.data.msg,
          type: 'success'
        });
        }
      })
      this.getAccount();
    } ,
       // 封装一个请求接口功能
    getAccount() {
      // 在初始化数据时发送请求渲染帐号列表
      userList({
        currentPage: this.curpage,
        pageSize: this.pagesize,
      }).then((res) => {
        this.total = res.data.total;
        for (const obj of res.data.data) {
          this.tabledata = res.data.data;
          let d = new Date(obj.ctime); //时间格式从国际时间转换为时区时间
          obj.ctime =
            d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate();
        }
      });
    },
    // 点击切换每页多少条时
    sizechange(newsize) {
      this.pagesize = newsize;
      this.getAccount();
    },
    // 点击跳转页数时给分页的当前页面重新赋值，改变试图，
    pagechange(newchange) {
      this.curpage = newchange;
      this.getAccount();
    },
    // 点击删除账号接口
    removeclick(obj) {
      //获取id删除
      removeacc({ id: obj.id }).then((res) => {
        this.$message({
          //删除成功弹框
          showClose: true,
          message: res.data.msg,
          type: "success",
        });
        //删除后重新渲染页面
        this.getAccount();
      });
      // window.location.pathname='/index/accountlist'
    },
    //弹出框中资源
    open() {},
    // 勾上时的函数，参数是勾上时的值，有一个自己的属性multipleSelection
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 批量删除
    removeAll() {
      for (const i of this.multipleSelection) {
        this.ids.push(i.id);
      }
      let a = JSON.stringify(this.ids);
      removeall({ ids: a }).then((res) => {
        if (res.data.code == 0) {
          this.getAccount();
          this.$message({
            //删除成功弹框
            showClose: true,
            message: res.data.msg,
            type: "success",
          });
        }
      });
    },
    //取消选择
    cancelclick() {
      //快速获取DOM元素
      this.$refs.mytable.clearSelection();
    },
  },
  // 数据初始化时调用获取列表接口
  created() {
    this.getAccount();
  },
};
</script>
<style lang="less" scoped>
.acountlist p {
  margin-top: 20px;
}
.el-pagination {
  margin: 15px 0;
}
</style>